// *******************************************************************************************************
// # リスト
// *******************************************************************************************************

// リスト
//
// #### export to common.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// Styleguide 6.0

/* ------------------------------------
	* リスト
* ------------------------------------ */


// タイトル付きのリスト→希望条件など
//
// .mod_list_title - sample
//
// Markup:
// <ul class="mod_list_title">
// <li class="list_title">
// <h3 class="ttl_list">希望家賃</h3>
// <div class="box_list_content">
// <span class="mod_select_content">
// <select name="" id="">
// <option value="0" selected="">下限なし</option>
// </select></span>
// <span class="mod_icn_between">〜</span>
// <span class="mod_select_content">
// <select name="" id="">
// <option value="9999999" selected="">上限なし</option>
// </select></span>
// <label class="ml30"><input name="" type="checkbox" id="" value="" />共益費・管理費含む</label>
// </div></li>
// <li class="list_title">
// <h3 class="ttl_list">間取り</h3>
// <div class="box_list_content box_madori">
// <ul class="list_btn_type">
// <li class="single"><a href="javascript: void(0);" class="mod_btn mod_btn_blue"><span>1人暮らし</span></a></li>
// <li class="double"><a href="javascript: void(0);" class="mod_btn mod_btn_blue active"><span>2人暮らし</span></a></li>
// <li class="family"><a href="javascript: void(0);" class="mod_btn mod_btn_blue"><span>ファミリー</span></a></li>
// </ul>
// <ul class="mod_list_input list_checkbox5">
// <li><label><input name="" type="checkbox" id="" value="" />ワンルーム</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />1K</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />1DK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />1LDK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />2K</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />2DK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />2LDK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />3K</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />3DK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />3LDK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />4K</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />4DK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />4LDK</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />5K以上</label></li>
// </ul>
// <p class="mod_check"><label><input name="" type="checkbox" id="" value="" />選択した間取り以上も表示</label></p>
// </div></li>
// </ul>
//
// Styleguide 6.1

/* --------------------------
	* mod_list_title
* -------------------------- */
.mod_list_title {
	margin-top: 30px;

	.list_title {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid $borderColorGray;
		@include clearfix;

		&:first-child {
			border-top: none;
			margin-top: 0;
			padding-top: 0;
		}
	}

	.ttl_list {
		padding-left: $fontSizeL;
		float: left;
		width: 190px - 16;
		line-height: 1.3;
		color: $textColorKhaki;
		font-size: $fontSizeL;
		font-weight: bold;
	}

	.box_list_content {
		float: left;
		width: 960px - 190;

		.mod_list_input {
			margin-top: -17px;

			li {
				padding-right: 0;
				width: 30%;
			}

			@include hack(6) {
				margin-top: -7px;
			}
			@include hack(7) {
				margin-top: -7px;
			}
		}

		.list_radio5 {
			li {
				padding-right: 0;
				width: 18%;
			}
		}
	}

	.box_madori {
		.list_btn_type {
			margin-right: -10px;
			margin-bottom: 20px;
			@include clearfix;

			li {
				margin-right: 8px;
				float: left;
				width: 200px;

				.mod_btn {
					color: $textColor;
					background-repeat: no-repeat;
					font-size: $fontSize;
					font-weight: normal;
				}

				.active {
					border-color: $borderColorPink;
					color: #fff;
					background-color: $bgColorPink;

					&:hover {
						@include opacity(1);
					}

					&:before {
						content: normal;
					}
				}
			}

			.mod_btn {
				padding-top: 19px;
				padding-bottom: 20px;
				line-height: $lineHeightS;
				text-align: left;
			}

			.single {
				.mod_btn {
					background-image: url(/shared/images/icon/icn_btn_single.png);
					background-position: 24px 8px;
				}
				span {
					padding-left: 60px;
				}
				.active {
					background-image: url(/shared/images/icon/icn_btn_single_active.png);
				}
			}
			.double {
				.mod_btn {
					background-image: url(/shared/images/icon/icn_btn_double.png);
					background-position: 16px 8px;
				}
				span {
					padding-left: 64px;
				}
				.active {
					background-image: url(/shared/images/icon/icn_btn_double_active.png);
				}
			}
			.family {
				.mod_btn {
					background-image: url(/shared/images/icon/icn_btn_family.png);
					background-position: 10px 8px;
				}
				span {
					padding-left: 62px;
				}
				.active {
					background-image: url(/shared/images/icon/icn_btn_family_active.png);
				}
			}
		}

		.mod_list_input {
			li {
				padding-right: 0;
				width: 18%;
			}
		}

		.mod_check {
			@include inline-block;
			margin-top: 20px;
			margin-left: 158px;
			padding: 20px 18px;
			position: relative;
			color: $textColorHover;
			background-color: $bgColorGray;
			font-size: $fontSizeL;
			font-weight: bold;

			&:after {
				margin-left: -8px;
				border: 8px solid transparent;
				border-bottom-color: $bgColorGray;
				position: absolute;
				left: 50%;
				top: -16px;
				width: 0;
				height: 0;
				content: "";
			}
		}

		.mod_checked {
			color: $textColorPink;

			&:after {
				border-bottom-color: $bgColorPinkChecked;
			}
		}

		.list_checkbox3 {
			margin-top: 0;

			li {
				width: 30%;
			}
		}
	}

	.bus {
		margin-top: 10px;
		margin-left: -10px;
		padding: 10px;
		@include inline-block;
		background-color: $bgColorGray;
	}
}


// チェックボックス・ラジオボタン→希望条件など
//
// .mod_list_input - sample
//
// Markup:
// <ul class="mod_list_input">
// <li><label><input name="" type="checkbox" id="" value="" />女性の一人暮らしに安心</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />子育てしやすい</label></li>
// <li><label><input name="" type="checkbox" id="" value="" />買い物に便利</label></li>
// </ul>
// <ul class="mod_list_input">
// <li><label><input name="time" type="radio" id="" value="" />1分以内</label></li>
// <li><label><input name="time" type="radio" id="" value="" />5分以内</label></li>
// <li><label><input name="time" type="radio" id="" value="" />15分以内</label></li>
// </ul>
//
// Styleguide 6.2


/* --------------------------
	* mod_list_input
* -------------------------- */
.mod_list_input {
	margin-top: -4px;
	@include clearfix;

	li {
		margin-top: 21px;
		padding-bottom: 3px;
		padding-right: 20px;
		float: left;
		width: 200px;

		@include hack(6) {
			margin-top: 5px;
		}
		@include hack(7) {
			margin-top: 5px;
		}
	}

	label {
		padding-left: 36px;
		text-indent: -36px;
		line-height: 1.3;

		@include hack(6) {
			padding-left: 0px;
			text-indent: 0px;
		}
		@include hack(7) {
			padding-left: 0px;
			text-indent: 0px;
		}
	}

	.mod_checkbox, .mod_radio {
		margin-bottom: -13px;
		top: -8px;
	}
}


// 設備アイコン
//
// .mod_list_icn_equipment4 - 数字が1列の最大数（4）
// .mod_list_icn_equipment6 - 数字が1列の最大数（6）
//
// Markup:
// <ul class="mod_list_icn_equipment {$modifiers}">
// <li class="tag"><img src="/shared/images/icon/equipment/icn_picture.png" alt="写真満載" width="100" height="31" /></li>
// <li><img src="/shared/images/icon/equipment/icn_freerent.png" alt="フリーレント" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_pet.png" alt="ペット相談" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_bathtoilet.png" alt="バス・トイレ別" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_autolock.png" alt="オートロック" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_parking.png" alt="駐車場有り" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_reheating.png" alt="追い炊き" width="100" height="20" /></li>
// <li><img src="/shared/images/icon/equipment/icn_monitor.png" alt="モニタ付インターホン" width="100" height="20" /></li>
// </ul>
//
// Styleguide 6.2

/* --------------------------
	* mod_list_icn_equipment
* -------------------------- */
.mod_list_icn_equipment {
	position: relative;
	margin-top: -16px;
	margin-right: -6px;
	padding-top: 10px;
	@include clearfix;

	li {
		margin-right: 6px;
		margin-top: 5px;
		float: left;

		&.tag {
			margin-top: -5px;
		}
	}
}

.mod_list_icn_equipment4 {
	width: 424px;
}

.mod_list_icn_equipment6 {
	width: 636px;
}

